<template>
  <div class="line"></div>
  <div class="modoule-warp">
    <div class="modoul">
      <!-- 计算属性 -->
      <button class="computted" @click="count++">
        修改原始值count；computed监听计算属性变化+1
      </button>
      <button class="computted" @click="tripleCount = tripleCount + 2">
        修改计算属性值
      </button>
      <p>原始值count: {{ count.toFixed(2) }}</p>
      <p>双倍值: {{ doubleCount.toFixed(2) }}</p>
      <p>三倍值: {{ tripleCount.toFixed(2) }}</p>
      <span
        >count为原始值，doubleCount、tripleCount基于原始值计算的属性值，如果修改原始值，计算属性也会跟随变化，有监听作用;
        同样修改可读写的计算属性值，原始依赖也会跟随变化。
      </span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
import { ref, computed } from "vue";

const count = ref(0);
const islog = ref(false)
/**
 * computed可以是只读属性，也可以是可写的计算属性（带 getter/setter）
 * **/
// 只读计算属性
const doubleCount = computed(() => count.value * 2);
// 可写计算属性（带 getter/setter）
const tripleCount = computed({
  get: () => count.value * 3,
  set: (val) => {
    count.value = val / 3; // 修改原始依赖
  },
});
/*-----------------------------------computed结束------------------------------------------------------*/

function newPromiseFun(data) {
  return new Promise((resolve,reject) => {
    // setTimeout(() => {
      resolve(`${data}-Promise执行完毕`);
    // }, 1000);
    reject("error", "Promise执行失败");
  });
}

onMounted(() => {
  console.log(islog.value)
  if(islog.value){
    console.log("直接输出");
  }
  newPromiseFun("do").then((res) => {
    console.log(res);
    return newPromiseFun("to")
  }).then((res1) => {
    console.log(res1)
    islog.value = true;
    return newPromiseFun("and")
  }).then((res2) => {
    console.log(res2)
  });
  
  
});
</script>
<style scoped lang="scss">
.line {
  width: 100%;
  border-top: 1px dashed #ccc;
  margin-bottom: 20px;
}
.modoule-warp {
  width: 100%;
  padding: 0 30px;
  display: flex;
  justify-content: space-between;
}
.modoul {
  text-align: center;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 20px;
  &:hover {
    box-shadow: 0 0 10px #ccc;
  }

  .computted {
    width: 110px;
    border-radius: 10px;
    padding: 10px 20px;
    background: #1989fa;
    color: #fff;
    line-height: 18px;
    margin-bottom: 10px;
  }
  p {
    line-height: 30px;
    color: #fd0000;
  }
  span {
    display: inline-block;
    width: 150px;
    line-height: 20px;
  }
}
</style>
<style></style>
